<template>
    <!-- <h1>{{this.$route.params}}</h1> -->
    <main>
        <div>
            <li v-for="(item,index) in data">
                <router-link :to="'/product'">
                    <div class="img">
                        <img :src="item.src" alt="">
                    </div>
                    <div class="main_price">
                        <span class="tag">特卖价</span>
                        <span class="price">{{item.price}}</span>
                        <span class="sale"><del>{{item.sale}}</del></span>
                        <span class="msg">{{item.msg}}</span>
                    </div>
                    <div class="main_msg">
                        <div class="msg2">{{item.msg2}}</div>
                        <div class="msg3">{{item.msg3}}</div>
                        <div class="msg4">
                            <span :class="item.class">{{item.msg4}}</span>
                        </div>
                    </div>
                </router-link> 
            </li>
        </div>
    </main>
</template>
<script>
    export default {
        data(){
            return {
                data:[]
            }
        },
        mounted(){
            if(this.$route.params!=''){
                this.$http.get('./data/details.json')
                .then((response)=> {
                    console.log(response);
                    let a=this.$route.params.pa;
                    this.data=response.data.datas[a].list
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // always executed
                });
            }
        }
    }
</script>
<style scoped>
    main{
        background-color: #f3f4f5;
    }
    main:after{
        content: "";
        display: table;
        clear: both;
    }
    li{
        float: left;
        width: 47vw;
        padding: 3vw 0 0 3vw;
        background-color: #f3f4f5;
    }
    .img{
        border-radius:2vw 2vw 0 0;
        width: 44vw;
        height: 44vw;
        overflow: hidden;
    }
    .img>img{
        width: 100%;
        height: 100%;
    }
    .main_price{
        background-color: #fff;
        padding: 3vw 2vw;
    }
    span{
        line-height: 4vw;
    }
    .tag{
        color: white;
        font-size: 3vw;
        background: -webkit-linear-gradient(left,#f03867,#cb78dc);
        background: linear-gradient(90deg,#f03867,#cb78dc);
        padding: 0 1vw;
        border-radius: 2vw;
    }
    .price{
        color: black;
        font-weight: 900;
        font-size: 4vw;
    }
    .sale{
        color: #98989f;
    }
    .msg{
        color: #98989f;
    }
    .msg2{
        color: #585c64;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .msg3{
        color: #98989f;
        padding: 2vw 0 0;
    }
    .main_msg{
        border-radius: 0 0 2vw 2vw;
        background-color: #fff;
        padding: 0 2vw;
    }
    .msg4{
        padding: 2vw 0 2vw;
    }
    .orange{
        padding: 0 1vw;
        border: 1px solid #f07009;
        color: #f07009;
        border-radius: 2vw;
    }
    .green{
        padding: 0 1vw;
        border: 1px solid #32b444;
        color: #32b444;
        border-radius: 2vw;
    }
</style>